<template>
    <div class="app-container">
        <div v-if="user">
            <el-row :gutter="20">
                <el-col :span="10" :xs="24">
                    <user-card :user="user" />
                </el-col>
                <el-col :span="14" :xs="24">
                    <el-card>
                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="编辑个人信息" name="account">
                                <account :user="user" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import UserCard from "@/components/UserCard";
import Account from "@/components/Account";

export default {
    name: "Profile",
    components: { UserCard, Account },
    data() {
        return {
            user: {},
            activeTab: "account",
        };
    },
    created() {
        this.getUser();
    },
    methods: {
        getUser() {
            this.user = {
                name: '',
                role: '',
                email: "admin@test.com",
                avatar: 'http://haoju.zzj6.net:82/file-server/2021/9/5/12/6a3f1b2d-5818-42d6-8269-1b0ca3bde262.png',
            };
        },
    },
};
</script>
